<%--
  Created by IntelliJ IDEA.
  User: 86135
  Date: 2023/3/30
  Time: 11:41
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>${requestScope.book.getBookName()}的评论详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body{
            background-image: url("${pageContext.request.contextPath}/statics/images/bg.png");
        }
    </style>
</head>
<body>

<div class="container">

    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="page-header">
                <h1>
                    <small>评论详情</small>
                    <a class="btn btn-primary" href="${pageContext.request.contextPath}/book/findBookByISBN?bookISBN=${book.getBookISBN()}" style="float: right;">返回</a>
                </h1>
            </div>
        </div>
    </div>

    <div class="row clearfix">
        <div class="col-md-12 column">
            <ul>
                <c:forEach var="comment" items="${requestScope.get('commentList')}">
                    <li style="list-style: none;border-bottom: #a5a5a5 1px solid;width:900px;   ">
                        <br><br>
                        <h5>
                            <img src="${pageContext.request.contextPath}/user/readPhoto?username=${comment.getUserName()}" alt="" style="width: 5%;height: auto;border-radius: 50%;">
                            <span style="font-size: 22px;font-weight: bold;margin-left: 5%;height: 5%;">${comment.getAuthor()}</span>
                            <span style="float: right">${comment.getTime()}</span>
                        </h5>
                        <p>${comment.getContent()}</p>
                        <br><br><br>
                    </li>
                </c:forEach>
            </ul>
        </div>
    </div>

    <div align="center">
        <label>第${requestScope.page.getPageCurrent()}/${page.pageCount}页</label>
        <a href="${pageContext.request.contextPath}/comment/listComments?pageNo=1&&bookISBN=${book.getBookISBN()}">首页</a>
        <a href="${pageContext.request.contextPath}/comment/listComments?pageNo=${page.pageCurrent-1}&&bookISBN=${book.getBookISBN()}" >上一页</a>
        <a href="${pageContext.request.contextPath}/comment/listComments?pageNo=${page.pageCurrent+1}&&bookISBN=${book.getBookISBN()}" >下一页</a>
        <a href="${pageContext.request.contextPath}/comment/listComments?pageNo=${page.pageCount}&&bookISBN=${book.getBookISBN()}">尾页</a> 跳转到:
        <input type="text" style="width:30px" id="turnPage" />页
        <input type="button" onclick="startTurn()" value="跳转" />
    </div>

    <script type="text/javascript">
        function startTurn(){
            var turnPage = document.getElementById("turnPage").value;
            if(turnPage > ${page.pageCount}){
                alert("超过最大页数，请重新输入！");
                return false;
            }
            if(turnPage < 1){
                alert("低于最小页数，请重新输入！");
                return false;
            }
            var shref="${pageContext.request.contextPath}/comment/listComments?bookISBN=${book.getBookISBN()}&pageNo="+turnPage;
            window.location.href=shref;
        }
    </script>
</div>

